<template>
  <view class="content">
    <image class="swiper" src="/static//index_imge1.jpg" mode="widthFix" />
    <view class="text-area" v-if="!isSettle">
      <view class="text1">
        <text>点击入驻，入住后为您推送大量点单</text>
      </view>
      <button @click="settlein" class="ruzhu">点击入驻</button>
    </view>
    <view class="" v-else>
      <!-- 入住后显示 -->
      <view class="content1">
        <view class="icon_box">
          <u-icon name="question-circle" color="#2979ff" size="28"></u-icon>
          <view class="icon-text"> 鲁班学院 </view>
        </view>
        <view class="icon_box">
          <u-icon name="order" color="#2979ff" size="28"></u-icon>
          <view class="icon-text"> 平台规则 </view>
        </view>
        <view class="icon_box">
          <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
          <view class="icon-text"> 鲁班优选 </view>
        </view>
        <view class="icon_box">
          <u-icon name="car" color="#2979ff" size="28"></u-icon>
          <view class="icon-text"> 积分商城 </view>
        </view>
        <view class="icon_box">
          <u-icon name="rmb-circle" color="#2979ff" size="28"></u-icon>
          <view class="icon-text"> 诚信保证金 </view>
        </view>
      </view>

      <view class="content2">
        <view class="box" @click="go_dingdan">
          <view class="num"> 5 </view>
          <view class="text"> 立即抢单 </view>
        </view>
        <view class="box box1" @click="go_dingdan">
          <view class="num"> 44 </view>
          <view class="text"> 立即报价 </view>
        </view>
        <view class="box box2" @click="go_dingdan">
          <view class="num"> 8 </view>
          <view class="text"> 保证金专区 </view>
        </view>
        <view class="box box3" @click="go_dingdan">
          <view class="num"> 0 </view>
          <view class="text"> 指派订单 </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import setting from '../../common/setting.js'
  export default {
    data() {
      return {}
    },
    onLoad() {},
    computed: {
      isSettle() {
        return this.$store.state.isSettle
      },
    },
    onPullDownRefresh() {
      console.log('页面刷新了')
    },
    methods: {
      settlein() {
        uni.navigateTo({
          url: '/pages/settlein/settlein',
        })
      },
      go_dingdan() {
        uni.navigateTo({
          url: '/pages/Order-Hall/Order-Hall',
        })
      },
    },
  }
</script>

// scoped表示当前页面生效

<style lang="scss" scoped>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 720rpx;
    margin: auto;
    background: #f7f7f7;

    .swiper {
      width: 720rpx;
    }

    .text-area {
      .text1 {
        margin-top: 20rpx;
        text-align: center;
      }

      .ruzhu {
        height: 100rpx;
        width: 200rpx;
        margin-top: 40rpx;
        background-color: rgb(116, 197, 234);
      }

      ::v-deep.u-button {
        color: rgb(229, 215, 215);
      }
    }
  }

  .content1 {
    width: 720rpx;
    height: 100rpx;
    background: #fff;
    margin-top: 40rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .icon_box {
      width: 128rpx;
      height: 100rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .icon-text {
        font-size: 25rpx;
      }
    }
  }

  .content2 {
    width: 720rpx;
    height: 400rpx;
    background: #fff;
    padding: 30rpx 0;
    margin-top: 40rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;

    .box {
      background: #f59773;
      width: 330rpx;
      height: 180rpx;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .num {
        font-size: 70rpx;
        font-weight: bold;
        color: #fff;
      }

      .text {
        color: #fff;
      }
    }

    .box1 {
      background: #f8b660;
    }

    .box2 {
      background: #be93fe;
    }

    .box3 {
      background: #7fc4fd;
    }
  }
</style>
